<template>
  <div class="head">
    <div class="van-cell" :style="headStyle">
      <div class="name flex1" :style="fontStyle">{{element.label}}</div>
      <div class="btn" v-if="element.operatShow" :style="operatPaddingRight">
        <i :class="['iconfont', element.iconName]" :style="iconStyle" v-if="element.iconShow" />
        <span :style="textStyle" v-if="element.textShow">{{element.textName}}</span>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  name: '',
  inject: ['element'],
  data() {
    return {}
  },
  computed: {
    headStyle() {
      const { background, paddingLeft, paddingRight, paddingTop, paddingBottom } = this.element.style
      return {
        background,
        paddingLeft: paddingLeft + 'px',
        paddingRight: paddingRight + 'px',
        paddingTop: paddingTop + 'px',
        paddingBottom: paddingBottom + 'px'
      }
    },
    fontStyle() {
      const { fontSize, color, fontWeight } = this.element.style
      return {
        fontSize: fontSize + 'px',
        color,
        fontWeight
      }
    },
    textStyle() {
      const { textFontSize } = this.element.operatStyle
      return {
        fontSize: textFontSize + 'px',
        paddingLeft: '5px'
      }
    },
    iconStyle() {
      const { iconFontSize } = this.element.operatStyle
      return {
        fontSize: iconFontSize + 'px'
      }
    },
    operatPaddingRight() {
      const { operatPaddingRight } = this.element.operatStyle
      return {
        paddingRight: operatPaddingRight + 'px'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.head {
  display: flex;
  .btn {
    display: flex;
    i,span {
      line-height: 24px;
    }
  }
}
</style>